<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="${path}/static/layui/css/layui.css" media="all">
</head>
<body>
	<form class="layui-form layui-form-pane" id="ajax_form"  method="post" onsubmit="return false">
	   <div class="layui-form-item">
	    <label class="layui-form-label">商品名称</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品副标题</label>
	    <div class="layui-input-block">
	      <input type="text" name="subtitle" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品分类</label>
	    <div class="layui-input-inline">
	      <select>
	        <option value="">请选择一级分类</option>
	        <option value="100001">家用电器</option>
	        <option value="100002">数码3C</option>
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select name="categoryId">
	        <option value="">请选择二级分类</option>
	        <option value="100012">手机</option>
	        <option value="100011">电脑</option>
	        <option value="100014">数码相机</option>
	      </select>
	    </div>
	  </div>
	   <div class="layui-form-item">
	    <label class="layui-form-label">商品价格</label>
	    <div class="layui-input-block">
	      <input type="text" name="price" class="layui-input">
	    </div>
	  </div>
	   <div class="layui-form-item">
	    <label class="layui-form-label">商品库存</label>
	    <div class="layui-input-block">
	      <input type="text" name="stock" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item" pane="">
	    <label class="layui-form-label">商品状态</label>
	    <div class="layui-input-block">
	      <input type="radio" name="status" value="1" title="上架" checked="">
	      <input type="radio" name="status" value="2" title="下架">
	    </div>
  	  </div>
  	  <div class="layui-form-item" pane="">
  	     <label class="layui-form-label">商品主图</label>
	  	  <div class="layui-upload layui-input-block">
			  <div class="layui-upload-list">
			  	<input type="hidden" name="mainImage" id="mainImgInputId"> 
			    <img class="layui-upload-img" id="mainImgId" width="150px" height="150px">
			    <p id="demoText"></p>
			  <button type="button" class="layui-btn" id="uploadBtnId">上传图片</button>
			  </div>
		  </div> 
	  </div>
	  <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">商品详情</label>
	    <div class="layui-input-block">
	      <textarea placeholder="请输入内容" name="detail" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	       <button class="layui-btn" onclick="submitForm()" value="添加">提交</button>
	       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>

	<script src="${path}/static/jquery-1.11.3.js"></script>
	<script src="${path}/static/mylayer.js"></script>
	<script src="${path}/static/util.js"></script>
	<script src="${path}/static/layui/layui.js"></script>
	<script>
		layui.use(['form', 'upload','layer'], function(){
		  var form = layui.form;
		  var layer = layui.layer;
		  var upload = layui.upload;
		 
		 /*  laydate.render({
			  elem: '#birthdayId'
			  ,trigger: 'click'
		  }); */
		//普通图片上传
		    var uploadInst = upload.render({
		      elem: '#uploadBtnId'
		      ,url: '${path}/upload/uploadImg.action'
		      ,before: function(obj){
		        //预读本地文件示例，不支持ie8
		        obj.preview(function(index, file, result){
		          $('#mainImgId').attr('src', result); //图片链接（base64）
		        });
		      }
		      ,done: function(res){
		         //如果上传失败
		         if(res.code == util.SUCCESS){
		           //上传成功
		           $('#mainImgInputId').val(res.data);
		         }
		      }
		      ,error: function(){
		        //演示失败状态，并实现重传
		        var demoText = $('#demoText');
		        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		        demoText.find('.demo-reload').on('click', function(){
		          uploadInst.upload();
		        });
		      }
		    });
		  
		  
		});
		
		function submitForm() {
			$.ajax({
				url : "${path}/product/insert.action",
				type : "post",
				dataType : "json",
				data : $("#ajax_form").serialize(),
				success : function(jsonObj) {
					console.log(jsonObj);
					if(jsonObj.code == util.SUCCESS) {
						mylayer.successMsg(jsonObj.msg);
						//当你在iframe页面关闭自身时
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						setTimeout(function(){
							parent.layer.close(index); //再执行关闭 
							// 刷新父页面
							window.parent.location.reload();
						},1000);
					} else {
						mylayer.errorMsg(jsonObj.msg);
					}
					
				}
			});
		}
</script>
</body>
</html>